<template>
  <!--搜索框-->
  <van-search v-model="value" placeholder="请输入搜索关键词" />
  <!--轮播图-->
  <van-swipe :autoplay="3000" lazy-render>
    <van-swipe-item v-for="image in images" :key="image">
      <img :src="image"  style="height: 250px" />
    </van-swipe-item>
  </van-swipe>
  <!--分类菜单-->
  <van-grid :column-num="4">
    <van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
  </van-grid>
  <!--卡片列表-->
  <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
      num="2"
      price="2.00"
      desc="描述信息"
      title="商品标题"
      thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  />
  <van-card
      num="2"
      desc="描述信息"
      title="商品标题"

  >
    <template #thumb>
      <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" style="width:150px;border-radius: 3px">
    </template>
  </van-card>
<!--Tabbar 标签栏s-->
  <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search" dot>标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o" badge="5">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o" badge="20">标签</van-tabbar-item>
  </van-tabbar>

</template>
<script setup>
import { ref } from 'vue';

const value = ref('');

const images = [
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
  'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];
</script>
<style scoped>

</style>
